<template>
  <div class="root-position">
    <el-container>
      <el-aside width="350px">
        <Asider/>
      </el-aside>
      <el-main>
          <div :style="{height : '5vh'}"/>
          <div style="position : relative">

            <el-card class="center-position" :body-style="{ width : '60vw',minWidth : '1200px',minHeight : '85vh' }">
              <div v-if="articleInfo != null">
                <div v-for="item in articleInfo" :key="item.id">
                  <div @click="toArticlePage(item.id)">
                    <h3 v-text="item.title"/>
                    <span v-text="item.description"/>
                  </div>
                  <el-divider v-if="item.id != articleInfo[articleInfo.length - 1].id"/>
                </div>
              </div>

              <div v-else>
                <span class="center-position">暂无数据</span>
              </div>
              <div :style="{height : '80px'}"/>
              <el-pagination
                class="centerBottom-position"
                background
                @current-change="getPagedArticleInfo"
                layout="prev, pager, next"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total">
              </el-pagination>
            </el-card>


          </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Asider from '../components/Asider'

export default {
  name: 'Index',
  created() {
    this.getPagedArticleInfo(1);
  },
  components: {
    Asider
  },
  computed: {
    articleInfo : {
      set(val) {
        this.$store.commit('setArticleInfo',val);
      },
      get() {
        return this.$store.state.articleInfo;
      }
    },
    getArticleInfoUrl() {
      return this.$store.getters.getPathPrefix() + "article/brief/"
    }
  },
  data() {
    return {
      pageInfo : {
        pageNo : 1,
        pageSize : 7,
        total : 0
      }
    }
  },
  methods: {
    toArticlePage(id) {
      this.$router.push("/article/" + id);
    },
    getPagedArticleInfo(page) {
      var url = this.getArticleInfoUrl + page + 'p/' + this.pageInfo.pageSize;
      this.$axios.get(url).then(response => {
        if(response.data.flg) {
          this.articleInfo = response.data.infoData;
          this.pageInfo.total = response.data.total;
          this.$forceUpdate();
        } else {
          var msg = "获取信息失败"
          if (response.data.msg != null) {
            msg += response.data.msg;
          }
          this.$message.error(msg);
        }
      })
    }
  },
}
</script>

<style scoped>

</style>
